<template>
  <a-modal
    title="备货轨迹"
    :width="1000"
    :visible="visible"
    :confirm-loading="confirmLoading"
    okText="打印"
    cancelText="关闭"
    @ok="submit"
    @cancel="close"
    size="small"
    :footer="null"
  >
    <div class="main">
      <div id="print-main" ref="printRef">
        <!-- 一物一码 -->
        <a-table
          v-if="dataSourceA.length > 0"
          :columns="columns"
          :data-source="dataSourceA"
          :pagination="false"
          bordered
        >
          <template slot="warePid" slot-scope="record">
            <template v-if="record.warePid != `总计：`">
              <barcode :value="record.warePid" :options="option"></barcode>
            </template>
            <template v-else>
              {{ record.warePid }}
            </template>
          </template>
        </a-table>
        <!-- 一码多物 -->
        <a-table
          v-if="dataSourceB.length > 0"
          :columns="columns"
          :data-source="dataSourceB"
          :pagination="false"
          :style="dataSourceA.length > 0 ? `margin-top: 20px` : ``"
          bordered
        >
          <template slot="warePid" slot-scope="record">
            <template v-if="record.warePid != `总计：`">
              <barcode :value="record.warePid" :options="option"></barcode>
            </template>
            <template v-else>
              {{ record.warePid }}
            </template>
          </template>
        </a-table>
      </div>
      <div class="button-wrap">
        <a-button @click="close()">关闭</a-button>
        <a-button type="primary" v-print="'#print-main'" style="margin-left: 20px"> 打印 </a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import printJs from 'print-js'
import barcode from '@xkeshi/vue-barcode'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          width: 60,
          // scopedSlots: { customRender: 'name' },
        },
        {
          title: '商品名称',
          dataIndex: 'productName',
          key: 'productName',
        },
        {
          title: '规格',
          dataIndex: 'specName',
          key: 'specName',
          width: 70,
        },
        {
          title: '库位信息',
          // dataIndex: 'warePid',
          // key: 'warePid',
          scopedSlots: { customRender: 'warePid' },
          width: 200,
        },
        {
          title: '备货数量',
          dataIndex: 'sums',
          key: 'sums',
          width: 80,
        },
        {
          title: '库存',
          dataIndex: 'fullSums',
          key: 'fullSums',
          width: 60,
        },
      ],
      dataSourceA: [],
      dataSourceB: [],
      printConfig: {
        id: 'print-main',
        popTitle: '备货单',
        extraHead: '123',
      },
      option: {
        displayValue: true, //是否默认显示条形码数据
        background: '#fff', //条形码背景颜色
        height: '25px',
        fontSize: '12px',
        lineColor: '#606266',
      },
    }
  },
  components: { barcode },
  methods: {
    submit() {
      printJs({
        printable: this.$refs.printRef,
        type: 'html',
        targetStyles: ['*'],
        scanStyles: false,
      })
    },
    open({ dataSource }) {
      this.visible = true
      // console.log('dataSource', dataSource)
      // 不显示重复的名字
      const arr = JSON.parse(JSON.stringify(dataSource)).map((e, i) => {
        const o = { ...e }
        if (i > 0 && e.specName == dataSource[i - 1].specName) {
          delete o.productName
          delete o.specName
        }
        return o
      })
      this.dataSourceA = arr
        .filter((f) => f.productType * 1 === 0)
        .map((e, i) => {
          e.index = i + 1
          if (e.warePid != '总计：') {
            e.sums = undefined
          }
          return e
        })
      this.dataSourceB = arr
        .filter((f) => f.productType * 1 === 1)
        .map((e, i) => {
          e.index = i + 1
          return e
        })
    },
    close() {
      this.visible = false
    },
  },
}
</script>

<style lang="scss" scoped>
.button-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
  // /deep/
}
:deep(.ant-table) {
  .ant-table-thead > tr > th {
    padding: 7px;
    font-size: 12px;
    font-weight: 650;
  }
  .ant-table-tbody > tr > td {
    font-size: 12px;
    padding: 7px;
  }
}
</style>